<template>
  <el-row>
    <el-col :xs="0" :md="2" />
    <el-col :xs="24" :md="20">
      <h1>{{ title }}</h1>
    </el-col>
    <el-col :xs="0" :md="2" />
  </el-row>
  <el-row type="flex" :gutter="20" class="flex-wrap">
    <template v-for="(item, index) in cardDatas">
      <el-col v-if="index % 4 == 0" :xs="0" :md="2" />
      <el-col :xs="12" :sm="12" :md="5" :lg="5" :xl="5" style="margin-bottom: 20px">
        <el-card :body-style="{ padding: '0px' }">
          <a :href="item.link">
            <img :src="item.imgurl" class="image" />
          </a>
          <div style="padding: 9px">
            <el-tag style="margin-right: 8px; margin-bottom: 8px;">
              <el-icon>
                <first-aid-kit />
              </el-icon>
              {{ item.title }}
            </el-tag>
            <el-tag>
              <el-icon>
                <user />
              </el-icon>
              {{ item.people }}
            </el-tag>
            <br />
            <div align="right">
              <!-- <el-button type="warning" size="small">收藏</el-button> -->
              <el-button type="primary" size="small" src="item.joinLink">加入</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col v-if="index % 4 == 3" :xs="0" :md="2" />
    </template>
  </el-row>
</template>

<script>
export default {
  name: 'RecommandCards',
  props: [
    'title',
    'cardDatas'
  ]
}
</script>

<style scope>
.flex-warp {
  flex-wrap: wrap;
}
</style>